<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view style="color: #232426;font-size: 32rpx;font-weight: 500;padding-left: 80rpx;">
				實名認證
			</view>
			<view style="width: 120rpx;">
				
			</view>
		</view>
		
		
		<view style="margin-top: 24rpx; width: 100%;box-sizing: border-box;padding: 0 30rpx;">
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">真實姓名</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle">
						<u-input name="name" placeholder="真實姓名" v-model="form.name" border="none"></u-input>
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">手機號</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle item-code">
						<view class="item-code" @click="changeCode">
							<view style="color: #232426;">+{{code}}</view>
							<view class="code-image">
								<u-image 
									src="/static/images/icon/down-icon.png"
									width="32rpx"
									height="32rpx"
								></u-image>
							</view>
						</view>
						<u-input name="mobile" placeholder="手機號碼" v-model="form.mobile" border="none"></u-input>
						<view :class="{'code-btn':timer==60,'code-btn-default':timer<60}" @click="sendMsg">
							{{codeBtn}}
						</view>
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">驗證碼</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle ">
						<u-input name="vccode" placeholder="驗證碼" v-model="form.vscode" border="none"></u-input>
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">電子郵箱</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle">
						<u-input name="email" placeholder="電子郵箱" v-model="form.email" border="none"></u-input>
					</view>
				</view>
			</view>
		</view>
		
		<view style="margin-top: 24rpx; width: 100%;box-sizing: border-box;padding: 0 30rpx;">
			<view class="list-item" @click="showType=true">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">認證類型</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle">
						{{typeString}}
					</view>
				</view>
				<view>
					<u-image
						src="/static/images/icon/right-icon.png"
						width="40rpx"
						height="40rpx"
					></u-image>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">身份證號</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle">
						<u-input name="idcard" placeholder="身份證號" v-model="form.idcard" border="none"></u-input>
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">證件上傳</view>
						<view class="warning-bag">*</view>
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: center;align-items: center;background-color: #FFF;gap: 40rpx;padding-bottom: 12rpx;">
				<view @click="camera(1)" style="box-sizing: border-box;text-align: center; ">
					<view v-if="form.front.length==0" class="idcard-img-cover">
						<u-image
							src="/static/images/id-card-1.png"
							width="140rpx"
							height="90rpx"
						></u-image>
					</view>
					<view v-else class="idcard-img">
						<u-image
							:src="form.front"
							width="290rpx"
							height="148rpx"
							radius="80rpx"
						></u-image>
					</view>
					<view>正面</view>
				</view>
				<view @click="camera(2)" style="box-sizing: border-box;text-align: center; ">
					<view v-if="form.back.length==0" class="idcard-img-cover">
						<u-image
							src="/static/images/id-card-2.png"
							width="140rpx"
							height="90rpx"
						></u-image>
					</view>
					<view v-else class="idcard-img">
						<u-image
							:src="form.back"
							width="290rpx"
							height="148rpx"
							radius="80rpx"
						></u-image>
					</view>
					<view>背面</view>
				</view>
			</view>
		</view>
		
		<view v-if="!showSubmit">
			<view @click="camera(3)" style="width: 100%;padding:0 60rpx;box-sizing: border-box;position: absolute;bottom: 60rpx;">
				<view style="width: 100%;border: 2rpx solid #E5E6E8;border-radius: 100rpx;box-sizing: border-box;text-align: center; padding: 20rpx 0; color:#7A7B7E;background-color: #FFF;">
					人臉認證
				</view>
			</view>
		</view>
		<view v-else>
			<view @click="submitVert" style="width: 100%;padding:0 60rpx;box-sizing: border-box;position: absolute;bottom: 60rpx;">
				<view style="width: 100%;border: 2rpx solid #27C5D6;border-radius: 100rpx;box-sizing: border-box;text-align: center; padding: 20rpx 0; color:#FFF;background-color: #27C5D6;">
					下一步
				</view>
			</view>
		</view>
		
		
		<!--預約類型-->
		<u-picker 
			:show="showType" 
			:columns="typeColumns" 
			keyName="title"
			@cancel="closeTypeFn" 
			@confirm="confirmTypeFn"
		></u-picker>
		<!--預約類型結束-->
		<custom-toast ref="toast" title="發送成功" image="/static/images/icon/success-circle.png" position="center" />
	</view>
</template>

<script>
	import { checkMessage, authVert } from '@/config/api.js';
	export default {
		data() {
			return {
				form:{
					type:1,
					name:'',
					code:'86',//区号
					mobile:'',
					vscode:'',//验证码
					idcard:'',
					front:'',
					back:'',
					face:'',
					email:''
				},
				code:'86',
				timer:60,
				codeBtn:'驗證',
				typeString:'身份證',
				typeColumns:[[
					{
						id:1,
						title:'身份證'
					},
					{
						id:1,
						title:'護照'
					},
					{
						id:1,
						title:'通行證'
					}]],
				images:[
					{
						url:"/static/images/icon/images/default.jpg"
					},
					{
						url:"/static/images/icon/images/default.jpg"
					}
				],
				showImg:false,
				showType:false
			}
		},
		onLoad(option) {
			
		},
		computed:{
			showSubmit(){
				for (const key in this.form) {
				    // 忽略原型链上的属性
				    if (this.form.hasOwnProperty(key)) {
				      // 检查属性值是否为空（字符串长度为0/非字符串类型直接判断）
				      if (this.form[key] === '' || this.form[key] === undefined || this.form[key] === null || 
				          (typeof this.form[key] === 'string' && this.form[key].trim().length === 0)) {
				        return false;
				      }
				    }
				}
				return true;
			}
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			camera(type){
				let that = this;
				
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						let uploadUrl = uni.$u.http.config.baseURL+'/api/home/upload'
						uni.showLoading({
							icon:'none',
							title:'上傳中...'
						})
						uni.uploadFile({
							url: uploadUrl,
							header: {
							    'Authorization': 'Bearer ' + uni.getStorageSync('token')// 从全局获取token
							},
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'type': 'auth',
								'timestamp': Date.now()
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								if( type == 1 ){
									that.form.front = res.fullurl;
								} else if(type == 2){
									that.form.back = res.fullurl;
								} else {
									that.form.face = res.fullurl;
								}
							},
							complete:() => {
								uni.hideLoading();
							}
						});
					}
				});
			},
			closeTypeFn(){
				this.showType = false;
			},
			confirmTypeFn(e){
				this.form.type = e.value[0].id;
				this.typeString = e.value[0].title;
				this.closeTypeFn();
			},
			changeCode(){
				let that = this;
				uni.navigateTo({
					url: '/pages/index/tel',
					events: {
						// 定义接收事件
						acceptData: (data) => {
							console.log('code:', data);
							that.code = data.data;
							that.form.code = data.data;
						}
					},
					success: (res) => {
						// 向B页面传递初始数据（可选）
						// res.eventChannel.emit('initData', { type: 1 });
					}
				});
				// this.changeCodeSwitch = true;
			},
			//發送短信
			sendMsg(){
				if(this.timer < 60){
					return;
				}
				let that = this;
				let params = {
					code:this.form.code,
					mobile:this.form.mobile
				}
				console.log(params)
				checkMessage(params).then((res) => {
					console.log(res)
					that.$refs.toast.show();
					//啟動倒計時
					that.setTimer();
					
				}).catch((e) =>{
					uni.showModal({
						title: '發送失败',
						content: '手機號碼有誤，請檢查後再試',
						confirmText:'確認',
						showCancel:false,
						confirmColor:'#007AFF',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateBack();
							}
						}
					});
					console.log(e)
				})
			},
			setTimer(){
				let that = this;
				if( that.timer <= 0 ){
					that.timer = 60;
					that.codeBtn = '驗證';
				} else {
					that.showTimer = false;
					that.timer--;
					that.codeBtn =  this.timer;
					setTimeout(function(){
						that.setTimer();
					},1000)
				}
			},
			submitVert(){
				let that = this;
				let data = {
					name:this.form.name,
					code:this.form.code,
					mobile:this.form.mobile,
					vscode:this.form.vscode,
					type:this.form.type,
					idcard:this.form.idcard,
					idcard_front:this.form.front,
					idcard_back:this.form.back,
					face:this.form.face,
					email:this.form.email
				}
				authVert(data).then((res) => {
					//success
					that.$refs.toast.show();
					setTimeout(()=>{
						uni.navigateBack()
					}, 1500)
					
				}).catch(() =>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #F6F8FA;
		min-height: 100vh;
	}
	.list-item{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 34rpx 24rpx;
		background-color: #FFF;
		margin-top: 2rpx;
		
		.list-item-title{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			.item-title{
				display: flex;
				justify-content: flex-start;
				width: 144rpx;
				
				.title{
					color: #232426;
					font-size: 28rpx;
					font-weight: 500;
				}
				.warning-bag{
					color: #FF3D43;
					margin-left: 10rpx;
				}
			}
			.item-subtitle{
				color: #BEC0C5;
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 24rpx;
			}
			.item-code{
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.code-btn{
					color: #27C5D6;
					border-radius: 200rpx;
					border: 2rpx solid #27C5D6;
					font-size: 28rpx;
					padding: 4rpx 20rpx;
				}
				.code-btn-default{
					color: #adadad;
					border-radius: 200rpx;
					border: 2rpx solid #adadad;
					font-size: 28rpx;
					padding: 4rpx 20rpx;
				}
			}
		}
		
	}
	
	.list-item:first-of-type{
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
	}
	.list-item:last-of-type{
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
	}
	.container{
		position: relative;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		
		.imgs{
			position: absolute;
			top: 50%;           /* 顶部定位到父容器 50% 位置 */
			left: 50%;          /* 左侧定位到父容器 50% 位置 */
			transform: translate(-50%, -50%); /* 自身宽高的 -50% 偏移 */
			width: 100%;
			text-align: center;
		}
		
		.footer{
			width: 100%;
			position: absolute;
			display: flex;
			justify-content: space-between;
			padding: 0 50rpx;
			box-sizing: border-box;
			bottom: 50rpx;
			
			.btn{
				color: #FFF;
			}
		}
	}
	.user-search-popup{
		width: 100%;
		background-color: #FAFAFA;
		padding: 24rpx 48rpx;
		box-sizing: border-box;
		
		.search-popup-item{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20rpx;
			
			.title{
				margin-left: 20rpx;
				font-size: 24rpx;
				color:#232426;
			}
			.highlight {
			  color: #27C5D6; /* 红色高亮 */
			  font-weight: bold; /* 可选：加粗强调 */
			}
		}
	}
	.popup-push-type{
		padding: 58rpx 40rpx 28rpx;
		
		.popup-push-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.site{
				color: #808690;
				font-size: 32rpx;
			}
			.title{
				color: #232426;
				font-size: 30rpx;
				font-weight: 600;
			}
			.btn{
				color: #27C5D6;
				font-size: 32rpx;
			}
		}
		.popup-push-body{
			margin-top: 24rpx;
			
			.popup-push-list{
				
				box-sizing: border-box;
				
				.popup-push-item{
					margin-top: 32rpx;
					padding: 20rpx 48rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					background: #F6F8FA;
					border-radius: 120rpx;
					
					.popup-push-icon{
						
					}
					.popup-push-radio{
						border-radius: 50%;
						width: 48rpx;
						height: 48rpx;
						background-color: #E5E6E8;
					}
					
					.popup-push-text{
						margin-left: 32rpx;
						width: 400rpx;
						
						.title{
							font-size:28rpx;
							font-weight: 600;
						}
						.describe{
							color:#6A707C;
							font-size:24rpx;
						}
					}
					
					.popup-push-arrow{
						margin-left: 32rpx;
					}
					
				}
			}
		}
	}
	.idcard-img-cover{
		display: block;
		width: 160rpx;
		background-color: #EDF5FF;
		border-radius: 24rpx;
		padding:28rpx 60rpx;
	}
	.idcard-img{
		display: block;
		width: 290rpx;
		border-radius: 24rpx;
		border: 2rpx solid #afafaf;
	}
</style>
